<template>
  <div>
    <el-container>
      <el-header style="margin-top: 10px;height: auto;">
        <el-row>
          <el-form :model="searchParams" inline>
            <el-form-item label="邮箱">
              <el-input v-model="searchParams.emials" placeholder="邮箱" />
            </el-form-item>
            <el-form-item label="名">
              <el-input v-model="searchParams.first_name" placeholder="名" />
            </el-form-item>
            <el-form-item label="姓">
              <el-input v-model="searchParams.last_name" placeholder="姓" />
            </el-form-item>
            <el-form-item label="国家">
              <el-select v-model="searchParams.country_code" filterable clearable placeholder="请选择">
                <el-option value="" label="所有" />
                <el-option
                  v-for="item in countries"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="经验">
              <el-input v-model="searchParams.experience" placeholder="经验" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="searchParams.gender" placeholder="性别" />
            </el-form-item>
            <el-form-item label="行业名称">
              <el-select v-model="searchParams.industry_name" placeholder="行业名称">
                <el-option
                  v-for="item in industries"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称">
              <el-input v-model="searchParams.company_name" placeholder="公司名称" />
            </el-form-item>
            <el-form-item label="职位标题">
              <el-input v-model="searchParams.position_title" placeholder="职位标题" />
            </el-form-item>
            <el-form-item label="职位描述">
              <el-input v-model="searchParams.position_description" placeholder="职位描述" />
            </el-form-item>
            <el-form-item label="外部搜索">
              <el-input v-model="searchParams.external_search" placeholder="外部搜索" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="listLoading" @click="handleSearch">搜索</el-button>
              <el-button
                type="primary"
                class="el-icon-plus add-btn"
                :disabled="listLoading"
              >创建发送任务
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-alert v-if="total" center type="warnning">当前查询数据总数:{{ total }}</el-alert>
          </el-col>
          <el-col :span="6">
            <el-button v-if="total > 20" type="primary" :loading="listLoading" @click="handleSearchNext">下一页</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-card v-for="item in data" :key="item.pk" class="box-card" style="margin-left: 5px;  margin-bottom: 20px; width: 340px;float: left;height: 450px;overflow: auto;">
          <div slot="header" class="clearfix">
            <span>{{ item.first_name + ' ' }}{{ item.last_name }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" size="mini">发询盘</el-button>
          </div>
          <div>
            <p><svg-icon :icon-class="item.country_code" />{{ getCountryLabel(item.country_code) }}</p>
            <p><span style="font-weight: bold;">职位:</span> {{ item.position_title }}</p>
            <p><span style="font-weight: bold;">行业:</span> {{ item.industry_name }}</p>
            <p v-if="item.company_name.length > 0"><span style="font-weight: bold;">公司:</span> {{ item.company_name }}</p>
            <p><span style="font-weight: bold;">描述:</span> {{ item.position_description }}</p>
            <p><span style="font-weight: bold;">技能:</span> {{ item.external_search }}</p>
            <p v-for="(email, idx) in parseEmails(item.emials)" :key="`email-${idx}`">{{ email }}</p>
            <div style="font-size: x-small"><p><span style="font-weight: bold;">经验: </span>{{ item.experience }}</p></div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { SearchLKDData } from '@/api/crm/crmlkddata'
import { getCountryLabel, countries, industries } from '../../api/crm/crmcommon'

export default {
  name: 'Lkddata',
  data() {
    return {
      data: [],
      getCountryLabel: getCountryLabel,
      listLoading: false,
      // pagination
      pagesize: 20,
      page: 1,
      total: 0,
      countries: countries,
      industries: industries,
      searchParams: {
        emials: '', // 注意这里可能是拼写错误，正常应为 'emails'
        first_name: '',
        last_name: '',
        country_code: '',
        experience: '',
        gender: '',
        industry_name: '',
        company_name: '',
        position_title: '',
        position_description: '',
        external_search: ''
      }
    }
  },
  methods: {
    parseEmails(jsonString) {
      try {
        return JSON.parse(jsonString)
      } catch (e) {
        return [] // 解析失败时返回空数组
      }
    },
    getList() {
      this.listLoading = true
      this.searchParams.page = this.page
      SearchLKDData(this.searchParams)
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSearchNext() {
      this.page += 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.top >>> .sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
.top >>> .el-select .el-input {
  width: 350px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 30px;
  margin-top: 28px;
}

.input-with-select {
  width: calc(100% - 200px);
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 68px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin-top: 60px;
  /*margin: 168px auto !important;*/
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 100px;
}
</style>
